UX/UI Designer & Front-End Developer
KRYSTEXXA Infusion Facts
Project Summary
Challenge
The KRYSTEXXA team needed a way to educate patients with uncontrolled gout and those around them of ways to manage their condition in their every day lives.
Objective
Create a simple yet informative and easy to navigate page that provides a plan for how to manage uncontrolled gout. This new page would efficiently organize and display all the resources, assets and suggestions that the KRYSTEXXA team had available.
Tools
Sketch
XD
Crownpeak
Timeframe
5 months
After understanding and analyzing the requirements, I conceptualized
5 design variations exploring content layout, interactions, and User expectations.
Concept 1
Concept 3
Concept 5
Concept 2
Concept 4
After reviews with the client and the development team,
we moved forward with concept #5.
This concept:
provided the best end-to-end experience as it layouts the content in the simplest and most organized manner.
provided the most intuitive and visible interactions.
It was the most feasible as it only required the use of existing component capabilities.
was the quickest to achieve as it required the least customization.
I iterated this concept 2 times based on qualitative and quantitive feedback received from 2 rounds of testing. Also, the UI was enhanced a bit while still staying in sync with the brand guidelines for the KRYSTEXXA site.
The final design consisted of the following pieces:
Video with Chapters
A 10-minute video was made easy to navigate with the main sections identified in chapters and placed on top of the video frame. Visual cues and simple interactions such as timestamps and hover effect were also added to help identify relevant segments and find placement in the timeline faster.
Additionally, the main takeaways of the videos were highlighted in bullets to help digest and remember the main content effortlessly.
Accounted for the different scenarios that a patient may be in when reaching the page.
Mindful CTAs
Email template can be edited and sent to an employer or a coworker at that exact time.
The patient can email the template to themself directly on the page and access it on any device at any time.
A PDF version is also available for download so the patient can have the information on his/her device for later use.
Simple Visual of a Plan
The journey was broken down into 12 steps and 4 stages for patients to follow easily and take action without feeling overwhelmed by all the recommendations and information included in this section. You can see two of those steps featured below.
Step 1
Step 3
Clear and Accessible CTAs
The remaining set of resources available are clearly sectioned for quick access at the bottom of the page. This helps the patient read about the subject and get his/her questions answered further.
Do you want to check it out on the site?